<template>
    <el-dialog title="选择组织" destroy-on-close append-to-body :visible.sync="visible">
        <div class="ec-dailog-body">
            <tree-transfer :title="title" :from_data='fromData' :to_data='toData' @addBtn='add' @removeBtn='remove'
                :mode='mode' height='540px' filter openAll>
            </tree-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import treeTransfer from 'el-tree-transfer' // 引入
    import * as orgService from '@/api/upms/org'
    import * as roleOrgService from '@/api/upms/roleorg'
    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    pkOrgs: '',
                    roleId: '',
                    ids: []
                },
                title: ['未选择组织列表', '已选择组织列表'],
                mode: "transfer",
                usersData: [],
                fromData: [],
                toData: [],
                orgsoptions: [],
                filterMethod(query, item) {
                    return item.name.indexOf(query) > -1;
                }
            }
        },
        components: {
            treeTransfer
        }, // 注册
        methods: {
            init(id) {
                this.visible = true
                this.toData = []
                this.dataForm.roleId = id;
                this.$nextTick(() => {
                    if (this.dataForm.roleId) {
                        // 默认加载全部菜单节点
                        orgService.getorgtree().then(data => {
                            this.fromData = []
                            this.fromData = this.arrayToTree(data, 0);
                        });

                        // 加载已分配的模块
                    }
                })
            },
            // 菜单树  转  element-tree树规范
            arrayToTree(arr, parentId) {

                //  arr 是返回的数据  parendId 父id
                let temp = [];

                let treeArr = arr;

                treeArr.forEach((item, index) => {

                    let defaultData = {
                        id: '',
                        pid: 0,
                        label: '',
                        children: []
                    }

                    defaultData.id = item.pkOrg
                    defaultData.pid = item.pkFatherorg
                    defaultData.label = item.name
                    defaultData.children = item.children

                    if (defaultData.pid == parentId) {


                        if (defaultData.children != null && this.arrayToTree(defaultData.children, defaultData
                                .id).length > 0) {

                            defaultData.children = this.arrayToTree(defaultData.children, defaultData.id);

                        }

                        temp.push(defaultData);

                    }

                });

                return temp;

            },
            submit() {
                roleOrgService.addroleorg(this.dataForm).then(data => {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.visible = false
                            this.$emit('refreshDataList')
                        }
                    })
                })

            },
            // 监听穿梭框组件添加
            add(fromData, toData, obj) {
                // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
                // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
                console.log("fromData:", fromData);
                console.log("toData:", toData);
                console.log("obj:", obj);
                // toData.map((item, index) => {
                //     this.toData.push(item.id)
                // })
                this.toData = toData

                obj.keys.forEach((item, index) => {
                    if (this.dataForm.ids.length > 0) {
                        this.dataForm.ids.push(item)
                    } else {
                        if (this.dataForm.ids.indexOf(item) === -1) {
                            this.dataForm.ids.push(item)
                        }
                    }
                })

                console.log(this.dataForm)
            },
            // 监听穿梭框组件移除
            remove(fromData, toData, obj) {
                // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
                // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
                console.log("fromData:", fromData);
                console.log("toData:", toData);
                console.log("obj:", obj);
                this.toData = toData

                obj.keys.forEach((item, index) => {
                    if (this.dataForm.ids.length > 0) {
                        if (this.dataForm.ids.indexOf(item) > -1) {
                            this.dataForm.ids.splice(index, 1);
                        }
                    }
                })
            }
        }
    }
</script>